<script setup>
import { reactive, ref, toRaw, toRef, watch } from 'vue'
import dayjs from 'dayjs'
import { queryFeedbackDetail, queryFeedbackList } from '@/service/feedback.js'
import FeedbackCheckDialog from '@/pages/Feedback/components/FeedbackCheckDialog.vue'
import FeedbackHandleDialog from '@/pages/Feedback/components/FeedbackHandleDialog.vue'
const searchForm = reactive({
  type: -1,
  status: -1,
  submitDateTime: null,
  keyword: null,
  currentPage: 1,
  pageSize: 10,
})
const feedbackList = ref([])
const totalCount = ref(0)
async function loadData() {
  const form = toRaw(searchForm)
  const params = {}
  params.type = form.type === -1 ? null : form.type
  params.status = form.status === -1 ? null : form.status
  console.log(form.submitDateTime)
  if (form.submitDateTime) {
    params.startTime = dayjs(form.submitDateTime[0]).format('YYYY-MM-DD')
    params.endTime = dayjs(form.submitDateTime[1]).format('YYYY-MM-DD')
  }
  params.keyword = form.keyword
  params.page = form.currentPage
  params.pageSize = form.pageSize
  console.log(params)
  const res = await queryFeedbackList(
    params.type,
    params.status,
    params.startTime,
    params.endTime,
    params.keyword,
    params.page,
    params.pageSize
  )
  feedbackList.value = res.data.records
  totalCount.value = res.data.total
  console.log(feedbackList.value)
}

watch(
  searchForm,
  () => {
    loadData()
  },
  { immediate: true }
)

const shortcuts = [
  {
    text: '今天',
    value: () => {
      const date = new Date()
      // 今天：开始和结束都是当前日期（精确到日）
      return [new Date(date.setHours(0, 0, 0, 0)), new Date(date.setHours(23, 59, 59, 999))]
    },
  },
  {
    text: '昨天',
    value: () => {
      const end = new Date()
      const start = new Date()
      // 昨天：开始=昨天0点，结束=昨天23:59:59
      start.setDate(start.getDate() - 1)
      end.setDate(end.getDate() - 1)
      return [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 999))]
    },
  },
  {
    text: '本月',
    value: () => {
      const end = new Date()
      const start = new Date(end.getFullYear(), end.getMonth(), 1) // 本月1号
      // 本月：开始=本月1号0点，结束=当前日期23:59:59（未到月底时）
      return [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 999))]
    },
  },
  {
    text: '上月',
    value: () => {
      const end = new Date()
      const start = new Date(end.getFullYear(), end.getMonth() - 1, 1) // 上月1号
      const lastDayOfLastMonth = new Date(end.getFullYear(), end.getMonth(), 0) // 上月最后一天
      // 上月：开始=上月1号0点，结束=上月最后一天23:59:59
      return [new Date(start.setHours(0, 0, 0, 0)), new Date(lastDayOfLastMonth.setHours(23, 59, 59, 999))]
    },
  },
  {
    text: '最近七天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 6) // 今天往前推6天（含今天共7天）
      return [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 999))]
    },
  },
  {
    text: '最近三十天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 29) // 今天往前推29天（含今天共30天）
      return [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 999))]
    },
  },
  {
    text: '最近九十天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 89) // 今天往前推89天（含今天共90天）
      return [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 999))]
    },
  },
  {
    text: '最近一年',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setFullYear(start.getFullYear() - 1) // 今天往前推1年
      return [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 999))]
    },
  },
  {
    text: '今年',
    value: () => {
      const end = new Date()
      const start = new Date(end.getFullYear(), 0, 1) // 今年1月1号
      // 今年：开始=1月1号0点，结束=当前日期23:59:59
      return [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 999))]
    },
  },
  {
    text: '去年',
    value: () => {
      const year = new Date().getFullYear() - 1
      const start = new Date(year, 0, 1) // 去年1月1号
      const end = new Date(year, 11, 31) // 去年12月31号
      // 去年：完整一整年
      return [new Date(start.setHours(0, 0, 0, 0)), new Date(end.setHours(23, 59, 59, 999))]
    },
  },
]
const feedbackCheckDialogRef = ref()
const feedbackHandleDialogRef = ref()
const feedbackInfo = ref(null)
function onTapCheckButton(row) {
  feedbackInfo.value = toRaw(row)
  console.log(feedbackInfo.value)
  feedbackCheckDialogRef.value.showModal = true
}
async function onTapHandleButton(row) {
  const feedbackId = row.id
  const res = await queryFeedbackDetail(feedbackId)
  Object.assign(feedbackHandleDialogRef.value.feedbackInfo, res.data)
  feedbackHandleDialogRef.value.showModal = true
  console.log(res.data)
}
</script>

<template>
  <div class="feedback">
    <el-form :inline="true" :model="searchForm" label-position="right" label-width="75px">
      <el-form-item label="反馈类型:">
        <el-select v-model="searchForm.type" placeholder="Select" style="width: 240px">
          <el-option :value="-1" label="全部类型" />
          <el-option :value="0" label="功能建议" />
          <el-option :value="1" label="问题反馈" />
          <el-option :value="2" label="投诉举报" />
          <el-option :value="3" label="其他问题" />
        </el-select>
      </el-form-item>
      <el-form-item label="处理状态:">
        <el-select v-model="searchForm.status" placeholder="Select" style="width: 240px">
          <el-option :value="-1" label="全部状态" />
          <el-option :value="0" label="未处理" />
          <el-option :value="1" label="已处理" />
        </el-select>
      </el-form-item>
      <el-form-item label="提交时间:">
        <el-date-picker
          v-model="searchForm.submitDateTime"
          :shortcuts="shortcuts"
          end-placeholder="结束时间"
          range-separator="~"
          start-placeholder="开始时间"
          style="width: 350px"
          type="daterange"
        />
      </el-form-item>
      <el-form-item label="关键词:">
        <el-input v-model="searchForm.keyword" style="width: 240px" placeholder="请输入用户名/反馈内容"></el-input>
        <el-button style="margin-left: 10px" type="default">重置查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="feedbackList"
      :header-cell-style="() => ({ background: '#eef1f6', color: '#606266' })"
      border
      style="width: 100%"
    >
      <el-table-column align="center" label="反馈ID">
        <template #default="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户信息" width="200">
        <template #default="scope">
          <div class="user-info">
            <img :src="scope.row.userAvatar" alt="" />
            <div class="user-info-right">
              <div class="user-info-name">{{ scope.row.userName }}</div>
              <div class="user-info-phone">{{ scope.row.userPhone }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="反馈类型">
        <template #default="scope">
          <el-tag v-if="scope.row.feedbackType === 0" type="primary">功能建议</el-tag>
          <el-tag v-if="scope.row.feedbackType === 1" type="success">问题反馈</el-tag>
          <el-tag v-if="scope.row.feedbackType === 2" type="danger">投诉举报</el-tag>
          <el-tag v-if="scope.row.feedbackType === 3" type="warning">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="反馈内容" width="400px">
        <template #default="scope">
          <div class="feedback-content">{{ scope.row.feedbackContent }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="提交时间" width="200">
        <template #default="scope">
          <span>{{ scope.row.feedbackTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.feedbackStatus === 1" type="success">已处理</el-tag>
          <el-tag v-else type="danger">等待处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="200">
        <template #default="scope">
          <el-button type="default" @click="onTapCheckButton(scope.row)">查看</el-button>
          <el-button type="warning" @click="onTapHandleButton(scope.row)">处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="searchForm.currentPage"
      v-model:page-size="searchForm.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px"
    />
  </div>
  <feedback-check-dialog ref="feedbackCheckDialogRef" :feedback-info="feedbackInfo"></feedback-check-dialog>
  <feedback-handle-dialog ref="feedbackHandleDialogRef" @update="loadData"></feedback-handle-dialog>
</template>

<style lang="scss" scoped>
.feedback {
  padding: 20px;
  background-color: #fff;
}
.feedback-content {
  /* 必须设置宽度（可根据需求调整，也可继承父容器宽度） */
  width: 100%;
  /* 核心样式：多行溢出省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 可选优化样式 */
  line-height: 1.5; /* 行高，可根据需求调整 */
  word-break: break-all; /* 中文换行优化，避免单个长词撑破容器 */
}
.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 32px;
    height: 32px;
  }
  .user-info-right {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .user-info-name {
      font-size: 14px;
      color: #1d2129;
    }
    .user-info-phone {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
